<template>
  <div class="title1">
    <span class="mainTitle"> 高校社团管理系统</span>
    <span id="userName">当前用户：{{ userName }}</span>
     <el-dropdown class="dropdown">
       <span class="el-dropdown-link">
         <el-icon id="tool1">
           <Tools />
         </el-icon>
       </span>
       <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="a">
              <RouterLink to="/managesys/person">个人信息</RouterLink>
            </el-dropdown-item>
           <el-dropdown-item command="b" @click="logout">退出登录</el-dropdown-item>
           <el-dropdown-item command="c">关于我们</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
  </div>
 </template>

<script setup>
import router, { routeLogout } from '@/router';
import { onMounted, ref } from 'vue';
import api from '@/api';

const userName = ref('');
const logout = () =>{
  if(!routeLogout(-1)){
    router.push('/login');
  }
}
onMounted(async () => {
  const result = await api.getSelfInfo();
    if(result[0] === 0){
        const data = result[1].data;       
        if(data.code == 0){
            
            return;
        }
        else{
          userName.value = data.data.userName;
        }
    }
})
</script>

<style>
.title1 {
  font-size: 50px;
  background-color: #1a72ff;
  width: 100vw;
}
#logo{
  height: 50px;
}
.mainTitle {
  margin-right: 15px;
  padding-left: 25px;
  color: rgb(255, 255, 255);
  font-family: "楷体";
  font-weight:900 ;
  position: relative;
  top: -5px;
  font-size: 40px;
  user-select: none;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown-link {
  color: rgb(255, 255, 255);
}
.dropdown{
  position: absolute;
  top: 13px;
  right: 20px;
}
#tool1 {
  position: relative;
  font-size: 40px;
}
a{
  text-decoration: none;
 }

a:visited{
  color:rgb(96, 98, 102);
}
a:link{
  color:rgb(96, 98, 102);
}
a:hover{
   color:rgb(64, 158, 255);
}
#userName{
  position: absolute;
  right: 5%;
  top: 35px;
  color: rgb(255, 255, 255);
  font-size: 13px;
}
</style>
